<template>
<div id="add-cate">
    <div class="cate-header">
        <h3>添加分类</h3>
    </div>
    <form class="cate-form">
        <my-input
            title='分类名称'
            :name="'catename'"
            autofocus
            v-model="catename"
        >
            <template v-slot:title>
                <span class='inp-title'>分类名称</span>
            </template>
        </my-input>
        <label for="select" class="label">
            <span class="select-title">父分类名称</span>
            <my-cascade-selector
                :list='lists'
                @cascade-event="handleCascadeEvent"
            ></my-cascade-selector>
        </label>
    </form>
    <div class="cate-footer">
        <my-button 
            :type="'back'"
            link
            :to="{name: 'classifyOfGoods'}"
        >返回</my-button>
        <my-button 
            :type="'save'"
            :disabled='!catename'
            @click.native="handleSave"
        >保存</my-button>
    </div>
</div>
</template>

<script>
import { Local } from '../../common'
import { CLASSIFY_OF_GOODS } from '../../config/localConstant'
import { 
    addGoodsCate 
} from '../../config/data'
export default {
    name: "addCate",
    props: ["cateList"],
    data() {
        return {
            lists: [],
            catename: "",
            parentcate: []
        }
    },
    created() {
        if(!this.cateList) {
            this.$router.push({name: "classifyOfGoods"})
        }
        this.lists = this.cateList
    },
    methods: {
        handleCascadeEvent(obj) {
            this.parentcate = obj.selectedCid
        },
        async handleSave() {
            let cateInfo = {
                catename: this.catename,
                parentcatename: this.parentcate.slice(-1)[0]
            }
            let result = await addGoodsCate(cateInfo)
            let { msg } = Local.get(CLASSIFY_OF_GOODS.KEY)
            msg[CLASSIFY_OF_GOODS.SELECTED_PAGE_OF_COUNT] = msg[CLASSIFY_OF_GOODS.SELECTED_PAGE_OF_COUNT] || 2
            msg[CLASSIFY_OF_GOODS.SELECTED_PAGE_NUMBER] = Math.ceil(result.data.tree.length / msg[CLASSIFY_OF_GOODS.SELECTED_PAGE_OF_COUNT]) || 1
            Local.set(CLASSIFY_OF_GOODS.KEY, msg)
            this.$router.push({name: "classifyOfGoods"})
        },
    }
}
</script>

<style scoped>
#add-cate {
    height: 100%;
}
.cate-header,
.cate-footer {
    display: flex;
    align-items: center;
    height: 50px;
    line-height: 50px;
}
.cate-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
}
.label {
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(-10px);
}
.select-title {
    min-width: 96px;
    height: 34px;
    line-height: 34px;
    padding-right: 16px;
    text-align-last: justify;
    white-space: nowrap;
}
.cate-footer {
    flex-direction: row;
    justify-content: center;
}
.cate-footer :first-child {
    margin-right: 12px;
}
</style>